<!--
 * @Author: Bennty
 * @Date: 2024-10-08 17:10:47
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-10-09 15:13:47
 * @Description: 请填写简介
-->
<template>
    <el-dialog v-model="props.visible" title="编辑刀线信息" @close="handleClose" width="20%" destory-on-close>
        <el-form ref="editFormRef" :model="formData" >
            <el-form-item label="刀线名称" prop="knifePlateName">
                <el-input v-model="formData.knifePlateName" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="所属分类" prop="knifeType">
                <el-select v-model="formData.knifeType" placeholder="请选择">
                    <el-option v-for="item in props.types" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="刀版金额" prop="knifeAmount">
                <el-input type="number" v-model="formData.knifeAmount" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="刀版使用上限" prop="knifeLimit">
                <el-input type="number" v-model.number="formData.knifeLimit" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="刀版AI文件" prop="file">
                <el-upload 
                    ref="uploadRef"
                    :action="uploadImgUrl"
                    :headers="headers"
                    :limit="1"
                    v-model:file-list="fileList"
                    :on-change="handleChange"
                >
                    <el-button type="primary">选择文件</el-button>
                </el-upload>
            </el-form-item>
            <el-form-item label="刀版标签">
                <el-row :gutter="10">
                    <el-col :span="20">
                        <el-input v-model="addedTag.label" placeholder="请输入"></el-input>
                    </el-col>
                    <el-col :span="4">
                        <el-button type="success" plain @click="onClickAddTag">添加</el-button>
                    </el-col>
                </el-row>
            </el-form-item>
            <el-form-item label="标签类型">
                <el-select v-model="addedTag.labelType">
                    <el-option v-for="item in props.tags" :key="item.label" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="现有标签">
                <div class="flex gap-2">
                    <el-tag 
                    class="tags" 
                    size="large" 
                    v-for="(item,index) in formData.knifePlateLabelList" 
                    :key="index"
                    :style="{color:`rgb(${props.tags.filter((tag:any)=>tag.value == item.labelType)[0].color})`,
                        background:`rgba(${props.tags.filter((tag:any)=>tag.value == item.labelType)[0].color}, 0.2)`,
                        border:`solid,1px,rgb(${props.tags.filter((tag:any)=>tag.value == item.labelType)[0].color})`}"
                    >{{ item.label }}</el-tag>
                </div>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button  type="primary" @click="onSubmit">确 定</el-button>
                <el-button @click="handleClose">取 消</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">

import type { FormInstance,UploadInstance, UploadProps ,UploadUserFile } from 'element-plus';
import { globalHeaders } from "@/utils/request";
import { updateKnifeModelApi } from '@/api/sj/warehouse/knifeModel';

interface FormDataType{
    id?: string | number;
    knifePlateName?: string;
    knifeType?: string;
    knifeAmount?: number;
    knifeLimit?: number;
    knifePlateUrl?: string;
    fileName?: string;
    knifePlateLabelList: {
        label?: string;
        labelType?: number;
    }[];
};

const props = defineProps(['visible','types','tags','data']);
const emits = defineEmits(['close','submit']);
const editFormRef = ref<FormInstance>();
const uploadRef = ref<UploadInstance>();
const baseUrl = import.meta.env.VITE_APP_BASE_API;
const uploadImgUrl = ref(baseUrl + "/resource/oss/upload");
const headers = ref(globalHeaders);
const fileList = ref<UploadUserFile[]>([]);

const addedTag = ref<any>({
    label: undefined,
    labelType: '1'
});

const formData = ref<FormDataType>({
    knifePlateName: undefined,
    knifeType: undefined,
    knifeAmount: undefined,
    knifeLimit: undefined,
    knifePlateUrl: undefined,
    fileName: undefined,
    knifePlateLabelList: []
});

const onClickAddTag = ()=>{
    if(addedTag.value){
        formData.value.knifePlateLabelList.push({...addedTag.value});
    };
    addedTag.value.label= undefined;
};

watch(()=>props.data,(newData)=>{
    formData.value.fileName = newData.fileName;
    formData.value.knifeAmount = newData.knifeAmount;
    formData.value.knifeLimit = newData.knifeLimit;
    formData.value.knifePlateName = newData.knifePlateName;
    formData.value.knifePlateUrl = newData.knifePlateUrl;
    formData.value.knifeType = newData.knifeType;
    formData.value.id = newData.id;
    const fileItem = {
        name: newData.fileName,
        url: newData.knifePlateUrl
    };
    fileList.value[0] = fileItem;
    formData.value.knifePlateLabelList = newData.dataList;
});

const handleChange: UploadProps['onChange'] = (uploadFile, uploadFiles) => {
    formData.value.fileName = uploadFile.name;
};

const onSubmit = async () => {
    // @ts-ignore
    if(fileList.value[0].response){
        // @ts-ignore
        formData.value.knifePlateUrl = fileList.value[0].response.data?.url;
    };
    const { code } = await updateKnifeModelApi({...formData.value});
    if(code == 200){
        emits('submit', true);
        handleClose();
    }else{
        emits('submit',false);
    }
};

const handleClose = () => {
    emits('close');
    formData.value.knifePlateLabelList = [];
    addedTag.value = {
        label: undefined,
        labelType: '1'
    }
    editFormRef.value?.resetFields();
    uploadRef.value?.clearFiles();
};

</script>

<style scoped lang="scss">
.tags{
    font-size: 18px;
}
.dialog-footer{
    display: flex;
    justify-content: center;
}
</style>